Täiustatud Reacti mustrid: Renderdusatribuutide ja kõrgema astme komponentide valdamine

React, JavaScripti teek kasutajaliideste loomiseks, pakub paindlikku ja võimsat ökosüsteemi. Kui projektid muutuvad keerukamaks, muutub täiustatud mustrite valdamine kriitiliseks, et kirjutada hallatavat, taaskasutatavat ja testitavat koodi. See blogipostitus sukeldub sügavalt kahte kõige olulisemasse: Renderdusatribuudid ja Kõrgema Astme Komponendid (HOC). Need mustrid pakuvad elegantseid lahendusi tavalistele väljakutsetele, nagu koodi taaskasutus, olekuhaldus ja komponendi kompositsioon.

Täiustatud mustrite vajaduse mõistmine

Reactiga alustades ehitavad arendajad sageli komponente, mis käsitlevad nii esitlust (UI) kui ka loogikat (olekuhaldus, andmete hankimine). Rakenduste skaleerimisel viib see lähenemisviis mitmete probleemideni:

• Koodi dubleerimine: Loogikat korratakse sageli komponentide vahel, muutes muudatused tüütuks.
• Tihe sidusus: Komponendid muutuvad tihedalt seotuks konkreetsete funktsioonidega, piirates taaskasutatavust.
• Testimisraskused: Komponente on raskem isoleeritult testida nende segaste kohustuste tõttu.

Täiustatud mustrid, nagu Renderdusatribuudid ja HOC-d, tegelevad nende probleemidega, edendades probleemide eraldamist, võimaldades paremat koodi korraldust ja taaskasutatavust. Need aitavad teil ehitada komponente, mida on lihtsam mõista, hooldada ja testida, mis viib jõulisemate ja skaleeritavamate rakendusteni.

Renderdusatribuudid: Funktsiooni edastamine atribuudina

Renderdusatribuudid on võimas tehnika koodi jagamiseks Reacti komponentide vahel, kasutades atribuuti, mille väärtus on funktsioon. Seda funktsiooni kasutatakse seejärel komponendi UI osa renderdamiseks, võimaldades komponendil edastada andmeid või olekut lapsekomponendile.

Kuidas Renderdusatribuudid töötavad

Renderdusatribuutide tuumkontseptsioon hõlmab komponenti, mis võtab funktsiooni atribuudina, tavaliselt nimega render või children. See funktsioon saab andmeid või olekut vanemkomponendilt ja tagastab Reacti elemendi. Vanemkomponent kontrollib käitumist, samas kui lapsekomponent käsitleb renderdamist pakutavate andmete põhjal.

Näide: Hiirejälgija komponent

Loome komponendi, mis jälgib hiire positsiooni ja pakub seda oma lastele. See on klassikaline Renderdusatribuutide näide.

            class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(event) {
    this.setState({ x: event.clientX, y: event.clientY });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      <p>The mouse position is ({x}, {y})</p>
    )} />
  );
}

            

              
                Copy
              
            
          

Selles näites:

• MouseTracker haldab hiire positsiooni olekut.
• See võtab vastu render atribuudi, mis on funktsioon.
• render funktsioon saab hiire positsiooni (x ja y) argumendina.
• App sees pakume funktsiooni render atribuudile, mis renderdab <p> sildi, mis kuvab hiire koordinaadid.

Renderdusatribuutide eelised

• Koodi taaskasutatavus: Hiire positsiooni jälgimise loogika on kapseldatud MouseTracker-isse ja seda saab taaskasutada igas komponendis.
• Paindlikkus: Lapsekomponent määrab, kuidas andmeid kasutada. See ei ole seotud konkreetse UI-ga.
• Testitavus: Saate hõlpsasti testida MouseTracker komponenti isoleeritult ja ka renderdamise loogikat eraldi testida.

Reaalsed rakendused

Renderdusatribuute kasutatakse tavaliselt järgmistel eesmärkidel:

• Andmete hankimine: Andmete hankimine API-dest ja jagamine lapsekomponentidega.
• Vormi käsitlemine: Vormi oleku haldamine ja selle pakkumine vormikomponentidele.
• UI komponendid: UI komponentide loomine, mis nõuavad olekut või andmeid, kuid ei dikteeri renderdamise loogikat.

Näide: Andmete hankimine

            class FetchData extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null, loading: true, error: null };
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(response => response.json())
      .then(data => this.setState({ data, loading: false }))
      .catch(error => this.setState({ error, loading: false }));
  }

  render() {
    const { data, loading, error } = this.state;

    if (loading) {
      return this.props.render({ loading: true });
    }

    if (error) {
      return this.props.render({ error });
    }

    return this.props.render({ data });
  }
}

function MyComponent() {
  return (
    <FetchData
      url="/api/some-data"
      render={({ data, loading, error }) => {
        if (loading) {
          return <p>Loading...</p>;
        }
        if (error) {
          return <p>Error: {error.message}</p>;
        }
        return <p>Data: {JSON.stringify(data)}</p>;
      }}
    />
  );
}

            

              
                Copy
              
            
          

Selles näites käsitleb FetchData andmete hankimise loogikat ja render atribuut võimaldab teil kohandada andmete kuvamist laadimise oleku, võimalike vigade või hangitud andmete põhjal.

Kõrgema Astme Komponendid (HOC): Komponentide ümbristamine

Kõrgema Astme Komponendid (HOC) on Reacti täiustatud tehnika komponendi loogika taaskasutamiseks. Need on funktsioonid, mis võtavad argumendina komponendi ja tagastavad uue, täiustatud komponendi. HOC-d on muster, mis tekkis funktsionaalse programmeerimise põhimõtetest, et vältida koodi kordamist komponentide vahel.

Kuidas HOC-d töötavad

HOC on sisuliselt funktsioon, mis aktsepteerib Reacti komponenti argumendina ja tagastab uue Reacti komponendi. See uus komponent tavaliselt ümbritseb algse komponendi ja lisab mõningaid täiendavaid funktsioone või muudab selle käitumist. Algset komponenti nimetatakse sageli 'ümbristatud komponendiks' ja uut komponenti 'täiustatud komponendiks'.

Näide: Komponent atribuutide logimiseks

Loome HOC, mis logib komponendi atribuudid konsooli.

            
function withLogger(WrappedComponent) {
  return class extends React.Component {
    render() {
      console.log('Props:', this.props);
      return <WrappedComponent {...this.props} />;
    }
  };
}

function MyComponent(props) {
  return <p>Hello, {props.name}!</p>;
}

const MyComponentWithLogger = withLogger(MyComponent);

function App() {
  return <MyComponentWithLogger name="World" />;
}

            

              
                Copy
              
            
          

Selles näites:

• withLogger on HOC. See võtab vastu WrappedComponent sisendina.
• withLogger sees tagastatakse uus komponent (anonüümne klassikomponent).
• See uus komponent logib atribuudid konsooli enne WrappedComponent renderdamist.
• Levitusoperaator ({...this.props}) edastab kõik atribuudid ümbristatud komponendile.
• MyComponentWithLogger on täiustatud komponent, mis on loodud rakendades withLogger MyComponent-ile.

HOC-de eelised

• Koodi taaskasutatavus: HOC-sid saab rakendada mitmele komponendile, et lisada sama funktsionaalsus.
• Probleemide eraldamine: Need hoiavad esitlusloogika eraldi muudest aspektidest, nagu andmete hankimine või olekuhaldus.
• Komponendi kompositsioon: Saate HOC-sid aheldada, et kombineerida erinevaid funktsioone, luues kõrgelt spetsialiseeritud komponente.

Reaalsed rakendused

HOC-sid kasutatakse mitmesugustel eesmärkidel, sealhulgas:

• Autentimine: Juurdepääsu piiramine komponentidele kasutaja autentimise alusel (nt kasutaja rollide või õiguste kontrollimine).
• Autoriseerimine: Komponentide renderdamise juhtimine kasutaja rollide või õiguste alusel.
• Andmete hankimine: Komponentide ümbristamine andmete hankimiseks API-dest.
• Stiilimine: Stiilide või teemade lisamine komponentidele.
• Jõudluse optimeerimine: Komponentide memoeerimine või ümberrenderdamise vältimine.

Näide: Autentimise HOC

            
function withAuthentication(WrappedComponent) {
  return class extends React.Component {
    render() {
      const isAuthenticated = localStorage.getItem('token') !== null;

      if (isAuthenticated) {
        return <WrappedComponent {...this.props} />;
      } else {
        return <p>Please log in.</p>;
      }
    }
  };
}

function AdminComponent(props) {
  return <p>Welcome, Admin!</p>;
}

const AdminComponentWithAuth = withAuthentication(AdminComponent);

function App() {
  return <AdminComponentWithAuth />;
}

            

              
                Copy
              
            
          

See withAuthentication HOC kontrollib, kas kasutaja on autentitud (antud juhul localStorage'is oleva tokeni alusel) ja renderdab tingimuslikult ümbristatud komponendi, kui kasutaja on autentitud; vastasel juhul kuvab see sisselogimisteate. See illustreerib, kuidas HOC-d saavad jõustada juurdepääsukontrolli, suurendades rakenduse turvalisust ja funktsionaalsust.

Renderdusatribuutide ja HOC-de võrdlemine

Nii Renderdusatribuudid kui ka HOC-d on võimsad mustrid komponendi taaskasutamiseks, kuid neil on erinevad omadused. Nende vahel valimine sõltub teie projekti konkreetsetest vajadustest.

Millal valida Renderdusatribuudid:

• Kui vajate suurt paindlikkust selle osas, kuidas lapsekomponent andmeid või olekut renderdab.
• Kui vajate lihtsat lähenemisviisi andmete ja funktsionaalsuse jagamiseks.
• Kui eelistate lihtsamat komponendi kompositsiooni ilma liigse pesastamiseta.

Millal valida HOC-d:

• Kui peate lisama ristlõikelisi probleeme (nt autentimine, autoriseerimine, logimine), mis kehtivad mitmele komponendile.
• Kui soovite taaskasutada komponendi loogikat muutmata algse komponendi struktuuri.
• Kui lisatav loogika on suhteliselt sõltumatu komponendi renderdatud väljundist.

Reaalsed rakendused: Globaalne perspektiiv

Mõelge ülemaailmsele e-kaubanduse platvormile. Renderdusatribuute võidakse kasutada CurrencyConverter komponendi jaoks. Lapsekomponent määraks, kuidas konverteeritud hindu kuvada. CurrencyConverter komponent võiks käsitleda API päringuid vahetuskursside jaoks ja lapsekomponent võiks kuvada hindu USD, EUR, JPY jne, sõltuvalt kasutaja asukohast või valitud valuutast.

HOC-sid saaks kasutada autentimiseks. withUserRole HOC võiks ümbritseda erinevaid komponente, nagu AdminDashboard või SellerPortal, ja tagada, et neile pääsevad juurde ainult sobivate rollidega kasutajad. Autentimisloogika ise ei mõjutaks otseselt komponendi renderdamise üksikasju, muutes HOC-d loogiliseks valikuks selle ülemaailmse juurdepääsukontrolli lisamiseks.

Praktilised kaalutlused ja parimad tavad

1. Nimetamiskonventsioonid

Kasutage oma komponentide ja atribuutide jaoks selgeid ja kirjeldavaid nimesid. Renderdusatribuutide puhul kasutage järjekindlalt render või children atribuudi jaoks, mis saab funktsiooni.

HOC-de puhul kasutage nimetamiskonventsiooni nagu withSomething (nt withAuthentication, withDataFetching), et selgelt näidata nende eesmärki.

2. Atribuutide käsitlemine

Atribuutide edastamisel ümbristatud komponentidele või lapsekomponentidele kasutage levitusoperaatorit ({...this.props}), et tagada kõigi atribuutide õige edastamine. Renderdusatribuutide puhul edastage hoolikalt ainult vajalikud andmed ja vältige tarbetut andmete avalikustamist.

3. Komponendi kompositsioon ja pesastamine

Olge teadlik, kuidas oma komponente koostate. Liiga palju pesastamist, eriti HOC-de puhul, võib muuta koodi raskemini loetavaks ja mõistetavaks. Kaaluge kompositsiooni kasutamist renderdusatribuudi mustris. See muster viib paremini hallatava koodini.

4. Testimine

Kirjutage oma komponentidele põhjalikud testid. HOC-de puhul testige täiustatud komponendi väljundit ja veenduge ka, et teie komponent saab ja kasutab atribuute, mida see on mõeldud HOC-lt saama. Renderdusatribuute on lihtne testida, kuna saate komponenti ja selle loogikat sõltumatult testida.

5. Jõudlus

Olge teadlik võimalikest jõudluse mõjudest. Mõnel juhul võivad Renderdusatribuudid põhjustada tarbetuid ümberrenderdusi. Memoeerige renderdusatribuudi funktsioon kasutades React.memo või useMemo, kui funktsioon on keeruline ja selle iga renderdamise uuesti loomine võib mõjutada jõudlust. HOC-d ei paranda alati automaatselt jõudlust; need lisavad komponentide kihte, seega jälgige hoolikalt oma rakenduse jõudlust.

6. Konfliktide ja kokkupõrgete vältimine

Kaaluge, kuidas vältida atribuutide nimekonflikte. HOC-de puhul, kui mitu HOC-d lisavad sama nimega atribuute, võib see viia ootamatu käitumiseni. Kasutage prefikseid (nt authName, dataName), et nimeruumida HOC-de lisatud atribuute. Renderdusatribuutide puhul veenduge, et teie lapsekomponent saab ainult vajalikke atribuute ja et teie komponendil on sisukad, mitte kattuvad atribuudid.

Järeldus: Komponendi kompositsiooni kunsti valdamine

Renderdusatribuudid ja Kõrgema Astme Komponendid on olulised tööriistad jõuliste, hallatavate ja taaskasutatavate Reacti komponentide ehitamiseks. Need pakuvad elegantseid lahendusi tavalistele väljakutsetele veebiarenduses. Neid mustreid ja nende nüansse mõistes saavad arendajad luua puhtamat koodi, parandada rakenduse jõudlust ja ehitada skaleeritavamaid veebirakendusi ülemaailmsetele kasutajatele.

Kuna Reacti ökosüsteem areneb edasi, võimaldab täiustatud mustritega kursis olemine teil kirjutada tõhusat ja tulemuslikku koodi, mis aitab lõppkokkuvõttes kaasa parematele kasutajakogemustele ja hallatavamatele projektidele. Neid mustreid omaks võttes saate arendada Reacti rakendusi, mis pole mitte ainult funktsionaalsed, vaid ka hästi struktureeritud, muutes need lihtsamini mõistetavaks, testitavaks ja laiendatavaks, aidates kaasa teie projektide edule globaalsel ja konkurentsivõimelisel maastikul.